<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>11.4组合class形式</title>
</head>

<body>
  <div id="root"></div>

  <!-- 加载 React。-->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">
    // 有些时候，我们会把一些组件看作是其他组件的特殊实例，
    // 比如 WelcomeDialog 可以说是 Dialog 的特殊实例。

    // 在 React 中，我们也可以通过组合来实现这一点。
    // “特殊”组件可以通过 props 定制并渲染“一般”组件：

    function FancyBorder(props) {
      return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
          {props.children}
        </div>
      );
    }

    function Dialog(props) {
      return (
        <FancyBorder color="blue">
          <h1 className="Dialog-title">{props.title}</h1>
          <p className="Dialog-message">{props.message}</p>
          {props.children}
        </FancyBorder>
      )
    }

    /** 
     * 项目中有些 Dialog 格式是差不多的，
     * 可以通过已经有的基础封装一下
     */
    class SignUpDialog extends React.Component {
      constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this)
        this.handleSignUp = this.handleSignUp.bind(this)

        this.state = { login: '' }
      }

      render() {
        return (
          <Dialog title="Mars Exploration Program"
            message="How should we refer to you?" >
            <input type="text"
              value={this.state.login}
              onChange={this.handleChange} />
            <button
              onClick={this.handleSignUp}>
              Sign Up
            </button>
          </Dialog>
        )
      }

      handleChange(e) {
        this.setState({ login: e.target.value })
      }

      handleSignUp(e) {
        console.log(`this input is ${this.state.login} !`);
        e.preventDefault()
      }

    }

    const root = document.getElementById('root');

    ReactDOM.render(<SignUpDialog />, root);


  </script>
</body>

</html>